<template>
  <div>
    <div class="margin-little-top">
      <el-checkbox v-model="input.rangeParam.enable">开启</el-checkbox>
      <el-input-number v-model="input.rangeParam.start" :disabled="rangeParamDisabled" class="margin-left" style="width: 120px" size="small" :min="0" :max="this.keyObj.length" />
      <el-input-number v-model="input.rangeParam.stop" :disabled="rangeParamDisabled" style="width: 120px" size="small" :min="0" :max="this.keyObj.length - 1" />
      <el-button :disabled="rangeParamDisabled" class="margin-left" plain size="small" @click="loadDataRequest">加载数据</el-button>
    </div>

    <template v-if="data">
      <p v-for="item in data" :key="item">{{ item }}</p>
    </template>
  </div>
</template>

<script>
import redis from '@/api/redis'

export default {
  name: 'List',
  props: {
    keyObj: {
      type: Object,
      required: true
    },
    connParam: {
      type: Object,
      required: true
    },
    serializerParam: {
      type: Object,
      required: true
    },
    all: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      input: {
        rangeParam: {
          enable: false,
          start: 0,
          stop: 0
        }
      },
      data: null
    }
  },
  computed: {
    rangeParamDisabled() {
      return this.all || !this.input.rangeParam.enable
    }
  },
  methods: {
    getData() {
      return this.data
    },
    loadData() {
      this.input.rangeParam.stop = this.keyObj.length - 1
      if (this.input.rangeParam.stop > 100) {
        // 不能无限制加载, 初始最多加载 100 条
        this.input.rangeParam.stop = 100
      }
      this.loadDataRequest()
    },
    loadDataRequest() {
      redis.readData(this.connParam, this.keyObj.key, this.serializerParam,
        this.all, null, this.input.rangeParam, null).then(res => {
        this.data = res.data
      })
    }
  }

}
</script>
